<template>
  <h2>{{name}}--{{age}} -- {{num}}</h2>
  <button @click="add">+1</button>
  <h3>岗位:{{info.type}}</h3>
  <h3>薪水:{{info.salary}}</h3>
  <button @click="changeSalary">改变薪水---</button>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    let name = 'su'
    let age = 21;
    let num = ref(1);
    let info = reactive({
      type:'前端工程师',
      salary:'20k'
    })
    

    function add(){
      num.value += 1;
    }
    function changeSalary(){
      info.salary = '30k'
    }
    return {
      name,
      age,
      num,
      add,
      info,
      changeSalary,
    }
  }
}
</script>

<style>
</style>
